<template>
  <header>
    <!-- 头像 -->
    <aside></aside>
    <!-- 用户名 -->
    <p>{{username}}</p>
    <!-- 退出按钮 -->
    <button @click="logout()">退出按钮</button>
  </header>
</template>

<script>
export default {
    name:"HomeHeader",
    data(){
        //访问会话存储中存储的登录者账号
        let loginuser = sessionStorage.getItem('islogin');
        return{
            username: loginuser,//在页面渲染前，读取会话存储的数据并赋值
        }
    },
    methods:{
        logout(){
            //清除sessionStorage
            sessionStorage.clear();
            //跳转
            alert('已退出');
            this.$router.push('/login');
        }
    }
}
</script>

<style scoped>
header{
    width: 100%;
    height: 78px;
    background-color: #008b8b;
    display: flex;
    align-items: center;
}
header aside{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    margin-left: 50px;
}
header p{
    margin-left: 30px;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    font-weight: 800;
}
header button{
    border: none;
    background-color: unset;
    padding: 20px 10px;
    box-shadow: 0px 0px 6px;
    border-radius: 5px;
}
</style>